<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">鹅舍环境预警监测</text>
      <text class="time">更新时间：{{ updateTime }}</text>
    </view>

    <!-- 预警信息列表 -->
    <view class="warning-list">
      <view 
        v-for="(item, index) in warnings" 
        :key="index" 
        class="warning-card"
        :class="[item.statusClass]"
      >
        <view class="card-left">
          <uni-icons 
            :type="item.icon" 
            :color="item.color" 
            size="24"
          ></uni-icons>
        </view>
        <view class="card-content">
          <text class="param-name">{{ item.parameter }}</text>
          <text class="param-value">{{ item.value }}{{ item.unit }}</text>
          <text class="status-tag">{{ item.statusText }}</text>
        </view>
        <view class="card-right">
          <text class="time">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const updateTime = ref(new Date().toLocaleTimeString());
const warnings = ref([
  {
    parameter: '温度',
    value: 32.5,
    unit: '℃',
    status: 'alert',  //三种状态 normal/warning/alert
    icon: 'thermometer',
    time: '14:30:45'
  },
  {
    parameter: '湿度',
    value: 85,
    unit: '%',
    status: 'warning',
    icon: 'water',
    time: '14:30:42'
  },
  {
    parameter: '氨气浓度',
    value: 25,
    unit: 'ppm',
    status: 'normal',
    icon: 'flag',
    time: '14:30:40'
  },
  {
    parameter: 'CO₂浓度',
    value: 1500,
    unit: 'ppm',
    status: 'alert',
    icon: 'cloud',
    time: '14:30:38'
  }
]);

// 计算属性
warnings.value.forEach(item => {
  // 状态处理
  item.statusText = {
    normal: '正常',
    warning: '警告',
    alert: '警报'
  }[item.status];
  
  // 样式处理
  item.statusClass = `status-${item.status}`;
  
  // 颜色处理
  item.color = {
    normal: '#67C23A',
    warning: '#E6A23C',
    alert: '#F56C6C'
  }[item.status];
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  .time {
    font-size: 24rpx;
    color: #909399;
  }
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.warning-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
  
  &.status-alert {
    border-left: 8rpx solid #F56C6C;
  }
  &.status-warning {
    border-left: 8rpx solid #E6A23C;
  }
  &.status-normal {
    border-left: 8rpx solid #67C23A;
  }
}

.card-left {
  margin-right: 20rpx;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  .param-name {
    font-size: 28rpx;
    color: #606266;
    margin-bottom: 8rpx;
  }
  
  .param-value {
    font-size: 34rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8rpx;
  }
  
  .status-tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 22rpx;
  }
}

.card-right {
  .time {
    font-size: 24rpx;
    color: #909399;
  }
}

// 状态颜色
.status {
  &-alert .status-tag {
    background-color: #F56C6C;
    color: white;
  }
  &-warning .status-tag {
    background-color: #E6A23C;
    color: white;
  }
  &-normal .status-tag {
    background-color: #67C23A;
    color: white;
  }
}
</style>